<template>
  <div
    class="songTag"
    :class="props.class"
    :style="{
      borderColor: props.type === 'vip' ? '#FE672E' : 'var(--primary-color)',
    }"
  >
    <!-- todo mv -->
    <span v-if="props.type === 'mv'" :style="{ cursor: 'pointer' }"
      >MV
      <SvgIcon
        icon-name="iconbofang"
        :size="10"
        color="var(--primary-color)"
      ></SvgIcon
    ></span>
    <span
      v-if="props.type === 'vip'"
      :style="{
        color: '#FE672E',
      }"
      >vip</span
    >
    <span v-if="props.type === 'quality'">{{ quality }}</span>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  type: keyof { quality: string; vip: string; mv: string };
  quality?: keyof { "Hi-Res": string; SQ: string };
  class?: any;
  mvid?: number;
}>();
</script>

<style scoped lang="less">
.songTag {
  font-size: 12px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 16px;
  border: 1px solid var(--primary-color);
  border-radius: 2px;
  color: var(--primary-color);
  padding: 0 4px;
}
</style>
